<template>
  <q-page>
    <div class="page-content">
      <div align="center" v-if="reportData !== undefined">
          <!--      第一页 -->
        <div>
          <Header
            :width="pageSize.width"
            :slide="slide"
            :height="176"
            :report-data="reportData"
          />
        </div>
        <div class="q-pa-md1">
          <q-carousel animated v-model="slide" arrows navigation infinite>
            <q-carousel-slide v-for="(value, index) in reportData.test.imgs"
              :name="index"
              :img-src="value"
            />
          </q-carousel>
        </div>
        <!--      第一页 -->
        <div>
          <One v-if="!reportData.test.check.flood.status&&!reportData.test.check.burnd.status&&!reportData.test.check.crashed.status"
            :width="pageSize.width"
            :slide="slide"
            :height="pageSize.height"
            :report-data="reportData"
          />
           <Two v-else
            :width="pageSize.width"
            :height="pageSize.height"
            :report-data="reportData"
          />
        </div>
        <!--      第一页 -->
        <!-- <div>

        </div> -->
        <!--      第一页 -->
        <div>
          <Three
            :width="pageSize.width"
            :height="pageSize.height"
            :report-data="reportData"
          />
        </div>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import One from './inpage/One.vue';
import Two from './inpage/Two.vue';
import Three from './inpage/Three.vue';
import Header from './inpage/Header.vue';
import { FetchData } from './ts/FetchData';
import { useRoute } from 'vue-router';
export default defineComponent({
  name: 'report',
  components: { Header,One, Two,Three },
  setup() {
    const pageSize = {
      width: '100%',
      height: '100%',
    };
    let rote = useRoute();
    let reportData = ref();
    const uuid = <string>rote.query.uuid;
    new FetchData(uuid, (res) => {
      console.log(res.test.check.crashed.checkItem.slice(0, 8));
      console.log(res.test.check.crashed.checkItem.slice(8, 16));
      console.log(res);
      console.log(res.test.imgs[0]);
      reportData.value = res;
    });
    return {
      pageSize,
      reportData,
      slide: ref(1),
      autoplay: ref(true)
    };
  },
});
</script>

<style scoped lang="sass">
//.page-content
//  width: vw
.page-item
  width: 100%
.page-footer
  width: 100%
  margin-top: 60px
</style>
